{##																#}
{## Developed for the University of Nottingham G52GRP module 	#}
{##																#}
{## Written by:	Marcus Whybrow (mxw18u) 						#}
{## Group: 		gp09-drm 										#}
{##																#}

{% extends "books/book_list.html" %}

{% block title %}
{{ book.title }} | {{ block.super }}
{% endblock %}

{% load truncate_filters %}

{% block page_title %}books-book-detail{% endblock %}

{% block breadcrumbs %}
{{ block.super }}
<li id="bc-books-book-detail"><a href="{% url book_detail book.isbn %}">{{ book.title|truncatechars:50 }}</a></li>
{% endblock %}

{% block head %}
<script type="text/javascript" src="/media/js/jquery.page-realtime-twitter-reactions.js"></script>
<script type="text/javascript" src="/media/js/jquery.preLoadImages.js"></script>
<script type="text/javascript">
	$(function() {
		
		// Close events for overlays
		
		$('#accept-overlay input.overlay-ok').click(function() {
			 $.unblockUI();
			 return false;
		});
		
		$.preLoadImages(
			'/media/images/icons/vote-arrow-up.png',
			'/media/images/icons/vote-arrow-up-on.png',
			'/media/images/icons/vote-arrow-down.png',
			'/media/images/icons/vote-arrow-down-on.png',
			'/media/images/black-50-bg.png'
		);
		
		$("div.vote-cell.voted-up .vote-up").attr('src', '/media/images/icons/vote-arrow-up-on.png');
		$("div.vote-cell.voted-down .vote-down").attr('src', '/media/images/icons/vote-arrow-down-on.png');
		
		$("#realtime-twitter-updates").getPageRealtimeReactions({
			query: "{{ book.author }}",
			numTweets: 5,
			loaderText: "Loading ...",
			slideIn: false,
			showHeading: false
		});
		
		$(".vote-up").click(function() {
			
			var voteCell = $(this).parent();
			var bookPK = voteCell.find('input[name="book"]').val()
			
			// Remember the initial state
			var initialState = '';
			if (voteCell.is('.voted-up')) {
				initialState = 'voted-up';
			} else if (voteCell.is('.voted-down')) {
				initialState = 'voted-down';
			} else {
				initialState = 'clear'
			}
			
			var score = parseInt(voteCell.find('.vote-score').text());
			
			if (initialState == 'voted-up') {
			
				// Removing Vote Up (go to clear)
				voteCell.removeClass('voted-up');
				voteCell.find('.vote-up').attr('src', '/media/images/icons/vote-arrow-up.png');
				voteCell.find('.vote-score').text(score - 1);
				
				$.ajax({
					url: '/books/' + bookPK + '/clearvote/',
					type: 'POST',
					success: function(data) {
						if (!data.success) {
							voteCell.addClass('voted-up');
							voteCell.find('.vote-up').attr('src', '/media/images/icons/vote-arrow-up-on.png');
							voteCell.find('.vote-score').text(score);
							alert(data.error_message);
						}
					},
					error: function() {
						voteCell.addClass('voted-up');
						voteCell.find('.vote-up').attr('src', '/media/images/icons/vote-arrow-up-on.png');
						voteCell.find('.vote-score').text(score);
						alert('no response');
					},
					dataType: 'json'
				});
			} else {
				
				// Adding Vote Up from clear or down
				voteCell.addClass('voted-up');
				
				if (initialState == 'clear') {
					
					// Adding Vote Up from clear
					voteCell.find('.vote-score').text(score + 1);
					voteCell.find('.vote-up').attr('src', '/media/images/icons/vote-arrow-up-on.png');
					
				} else if (initialState == 'voted-down') {
					
					// Adding Vote Up from down
					voteCell.removeClass('voted-down');
					voteCell.find('.vote-score').text(score + 2);
					
					voteCell.find('.vote-up').attr('src', '/media/images/icons/vote-arrow-up-on.png');
					voteCell.find('.vote-down').attr('src', '/media/images/icons/vote-arrow-down.png');
				}
				
				$.ajax({
					url: '/books/' + bookPK + '/upvote/', 
					type: 'POST',
					success: function(data) {
						if(!data.success) {
							voteCell.find('span.vote-score').text(score);
							voteCell.removeClass('voted-up');
							if (initialState == 'clear') {
								// Fall back from Up to Clear
								
								voteCell.find('.vote-up').attr('src', '/media/images/icons/vote-arrow-up.png');
							} else if (initialState == 'voted-down') {
								// Fall back from Up to Down
								voteCell.addClass('voted-down');
								voteCell.find('.vote-up').attr('src', '/media/images/icons/vote-arrow-up.png');
								voteCell.find('.vote-down').attr('src', '/media/images/icons/vote-arrow-down-on.png');
							}
							alert(data.error_message);
						}
					},
					error: function() {
						voteCell.find('span.vote-score').text(score);
						voteCell.removeClass('voted-up');
						if (initialState == 'clear') {
							// Fall back from Up to Clear
							voteCell.find('.vote-up').attr('src', '/media/images/icons/vote-arrow-up.png');
						} else if (initialState == 'voted-down') {
							// Fall back from Up to Down
							voteCell.addClass('voted-down');
							voteCell.find('.vote-up').attr('src', '/media/images/icons/vote-arrow-up.png');
							voteCell.find('.vote-down').attr('src', '/media/images/icons/vote-arrow-down-on.png');
						}
						alert('no response');
					},
					dataType: 'json'
				});
			}
		});
		
		$(".vote-down").click(function() {
			
			var voteCell = $(this).parent();
			var bookPK = voteCell.find('input[name="book"]').val()
			
			// Remember the initial state
			var initialState = '';
			if (voteCell.is('.voted-up')) {
				initialState = 'voted-up';
			} else if (voteCell.is('.voted-down')) {
				initialState = 'voted-down';
			} else {
				initialState = 'clear'
			}
			
			var score = parseInt(voteCell.find('.vote-score').text());
			
			if (initialState == 'voted-down') {
			
				// Removing Vote Down (go to clear)
				voteCell.removeClass('voted-down');
				voteCell.find('.vote-down').attr('src', '/media/images/icons/vote-arrow-down.png');
				voteCell.find('.vote-score').text(score + 1);
				
				$.ajax({
					url: '/books/' + bookPK + '/clearvote/',
					type: 'POST',
					success: function(data) {
						if (!data.success) {
							voteCell.addClass('voted-down');
							voteCell.find('.vote-down').attr('src', '/media/images/icons/vote-arrow-down-on.png');
							voteCell.find('.vote-score').text(score);
							alert(data.error_message);
						}
					},
					error: function() {
						voteCell.addClass('voted-down');
						voteCell.find('.vote-down').attr('src', '/media/images/icons/vote-arrow-down-on.png');
						voteCell.find('.vote-score').text(score);
						alert('no response');
					},
					dataType: 'json'
				});
			} else {
				
				// Adding Vote Down from clear or up
				voteCell.addClass('voted-down');
				
				if (initialState == 'clear') {
					
					// Adding Vote Up from clear
					voteCell.find('.vote-score').text(score - 1);
					voteCell.find('.vote-down').attr('src', '/media/images/icons/vote-arrow-down-on.png');
					
				} else if (initialState == 'voted-up') {
					
					// Adding Vote Up from down
					voteCell.removeClass('voted-up');
					voteCell.find('.vote-score').text(score - 2);
					
					voteCell.find('.vote-down').attr('src', '/media/images/icons/vote-arrow-down-on.png');
					voteCell.find('.vote-up').attr('src', '/media/images/icons/vote-arrow-up.png');
				}
				
				$.ajax({
					url: '/books/' + bookPK + '/downvote/', 
					type: 'POST',
					success: function(data) {
						if(!data.success) {
							voteCell.find('span.vote-score').text(score);
							voteCell.removeClass('voted-down');
							if (initialState == 'clear') {
								// Fall back from Down to Clear
								voteCell.find('.vote-down').attr('src', '/media/images/icons/vote-arrow-down.png');
							} else if (initialState == 'voted-up') {
								// Fall back from Down to Down
								
								voteCell.find('.vote-down').attr('src', '/media/images/icons/vote-arrow-down.png');
								voteCell.find('.vote-up').attr('src', '/media/images/icons/vote-arrow-up-on.png');
							}
							alert(data.error_message);
						}
					},
					error: function() {
						voteCell.find('span.vote-score').text(score);
						voteCell.removeClass('voted-down');
						if (initialState == 'clear') {
							// Fall back from Down to Clear
							voteCell.find('.vote-down').attr('src', '/media/images/icons/vote-arrow-down.png');
						} else if (initialState == 'voted-up') {
							// Fall back from Down to Down
							voteCell.addClass('voted-up');
							voteCell.find('.vote-down').attr('src', '/media/images/icons/vote-arrow-down.png');
							voteCell.find('.vote-up').attr('src', '/media/images/icons/vote-arrow-up-on.png');
						}
						alert('no response');
					},
					dataType: 'json'
				});
			}
		});
	});
</script>
{% endblock %}

{% block content %}
<div class="section">
	<div class="inner clearfix">
		{% if book %}
			<h2>{{ book.title }}</h2>
			{% if book.thumbnail_large %}<img src="{{ book.thumbnail_large }}" />{% endif %}
			<div class="vote-cell {% if vote and vote.is_upvote %}voted-up{% else %}{% if vote and vote.is_downvote %}voted-down{% endif %}{% endif %}">
				<input type="hidden" name="book" value="{{ book.pk }}" />
				<img class="vote-up" src="/media/images/icons/vote-arrow-up.png" />
				<span class="vote-score">{{ score.score }}</span>
				<img class="vote-down" src="/media/images/icons/vote-arrow-down.png" />
			</div>
			<div class="votable-content">
				<p>{{ book.description }}</p>
				<p><strong>{{ book.author }}</strong> ({{ book.publisher }}, {{ book.published|date:"Y" }})</p>
			</div>
		{% else %}
			<h2>Whoops!</h2>
			<p>You dont have that book in this library.</p>
		{% endif %}
	</div>
</div>
<div class="section">
	<div class="inner clearfix">
		<div id="editions" class="votable-content">
			<div class="rounded-wrapper">
				<h3>Editions Of This Book</h3>
				<ul class="double-title item-list">
				{% for edition in book.edition_group.editions.all %}
					<li id="{{ edition.pk }}" {% ifequal edition.pk book.pk %}class="this"{% endifequal %}>
						<a class="item-title" href="{{ edition.get_absolute_url }}">{{ edition.published|date:"Y"|default:'0000' }}</a>
						<p class="item-subtitle">{{ edition.isbn }}</p>
					</li>
				{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</div>
<div class="section">
	<div class="inner clearfix">
		<div id="realtime-twitter" class="votable-content">
			<h3>Tweets About The Author</h3>
			<div id="realtime-twitter-updates"></div>
		</div>
	</div>
</div>
<div class="section">
	<div class="inner clearfix">
		<div class="votable-content">
			<h3>Popularity</h3>
			<p>Information regarding addition of this book to users libraries or collections. Maybe a graph, and some sort of total number.</p>
			<h3 class="inline">Other statistics</h3>
			<p>Who knows what might be here in the future.</p>
		</div>
	</div>
</div>
<div class="section">
	<div class="inner">
		<p class="center">{{ book.isbn }}</p>
		<p class="last center">{{ book.pk }}</p>
	</div>
</div>

<div id="accept-overlay" class="overlay">
	<div class="overlay-header">
		<h1 class="target"></h1>
	</div>
	<div class="overlay-body">
		<p class="target"></p>
	</div>
	<div class="overlay-footer clearfix">
		<input type="button" class="overlay-ok overlay-button" value="Alright" /> 
	</div>
</div>
{% endblock %}